<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" ref="listQuery" :model="listQuery" class="demo-form-inline">
        <el-form-item prop="departmentKpiType">
          <el-input v-model="listQuery.departmentKpiType" placeholder="部门绩效类型" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="departmentName">
          <el-input v-model="listQuery.departmentName" placeholder="部门名称" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item>
          <el-button v-waves type="success" icon="Search" @click="handleFilter">
            查询
          </el-button>
          <el-button icon="Refresh" @click="handleResetQuery">
            重置
          </el-button>
          <el-button v-show="checkAuthByCode('')" type="primary" icon="Download" @click="handleExport">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="el-divider--horizontal-margin" />
    <el-table v-loading="listLoading"
              :key="tableKey"
              :data="list"
              border
              fit
              highlight-current-row
              tooltip-effect="dark"
              @sort-change="handleSortChange"
              @selection-change="handleSelectionChange">
      <el-table-column align="center" type="index" label="序号" width="60px" />
      <el-table-column align="center" label="ID" prop="id" width="60px" sortable show-overflow-tooltip />
      <el-table-column align="center" label="年度" prop="year" sortable show-overflow-tooltip />
      <el-table-column align="center" label="绩效类型" width="100px" prop="departmentPerformanceType">
        <template v-slot="{row}">{{ row.departmentPerformanceType === '1' ? '一上编制' : '二上编制' }}</template>
      </el-table-column>
      <el-table-column align="center" label="部门名称" prop="departmentName" sortable show-overflow-tooltip />
      <el-table-column align="center" label="部门职能概述" prop="departmentSummarize" sortable show-overflow-tooltip />
      <el-table-column align="center" label="本年度部门预算收入（总额）" prop="totalRevenue" sortable show-overflow-tooltip />
      <el-table-column align="center" label="财政拨款收入" prop="allocateRevenue" sortable show-overflow-tooltip />
      <el-table-column align="center" label="一般公共预算" prop="allocateRevenue1" sortable show-overflow-tooltip />
      <el-table-column align="center" label="政府性基金预算" prop="allocateRevenue2" sortable show-overflow-tooltip />
      <el-table-column align="center" label="国有资本经营预算" prop="allocateRevenue3" sortable show-overflow-tooltip />
      <el-table-column align="center" label="事业收入" prop="businessRevenue" sortable show-overflow-tooltip />
      <el-table-column align="center" label="经营收入" prop="engageRevenue" sortable show-overflow-tooltip />
      <el-table-column align="center" label="其他需要说明的情况" prop="others" sortable show-overflow-tooltip />
      <el-table-column align="center" label="部门整体支出目标（本年）" prop="targetCurrent" sortable show-overflow-tooltip />
      <el-table-column align="center" label="部门年度整体预算完成率（本年）" prop="targetRateCurrent" sortable show-overflow-tooltip />
      <el-table-column align="center" label="部门年度整体预算完成率（三年期）" prop="targetRateThree" sortable show-overflow-tooltip />
      <el-table-column align="center" label="创建时间" width="180px" prop="createTime" sortable show-overflow-tooltip>
        <template v-slot="{row}"><DateTag :timestamp="row.createTime" /></template>
      </el-table-column>
      <el-table-column align="center" label="最后修改时间" width="180px" prop="updateTime" sortable show-overflow-tooltip>
        <template v-slot="{row}"><DateTag :timestamp="row.updateTime" /></template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160px" fixed="right">
        <template v-slot="{row}">
          <el-button type="primary" link @click="handleView(row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-model:total="total" v-model:page="listQuery.pageNum" v-model:limit="listQuery.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import baseConfig from '@/mixins/baseConfig'
import {doGet, doPost, doPut, doDelete, doGetDownload} from '@/config/http'
import {alertErrorMsg, customValidator, notifySuccess} from '@/config/common'

const emptyObj = {
  departmentKpiType: null, // 部门绩效类型
  departmentName: null, // 部门名称
  departmentSummarize: null, // 部门职能概述
  totalRevenue: null, // 本年度部门预算收入（总额）
  allocateRevenue: null, // 财政拨款收入
  allocateRevenue1: null, // 一般公共预算
  allocateRevenue2: null, // 政府性基金预算
  allocateRevenue3: null, // 国有资本经营预算
  specialRevenue: null, // 财政专户管理资金
  businessRevenue: null, // 事业收入
  engageRevenue: null, // 经营收入
  otherRevenue: null, // 其他收入
  targetCurrent: null, // 部门整体支出目标（本年）
  targetRateCurrent: null, // 部门年度整体预算完成率（本年）
  targetThree: null, // 部门整体支出目标（三年期）
  targetRateThree: null, // 部门年度整体预算完成率（三年期）
  others: null, // 其他需要说明的情况
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null
}

export default {
  name: 'departmentPerformance',
  mixins: [baseConfig],
  data() {
    return {
      svc: 'icims-api',
      obj: Object.assign({}, emptyObj),
      routes: [],
      dialogVisible: false,
      dialogType: 'add',
      dialogTypeTitle: '新增',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        sortField: 'id',
        sortType: 'desc',
        year: null,
        departmentKpiType: null,
        departmentName: null,
        totalRevenue: null,
        allocateRevenue: null,
        allocateRevenue1: null,
        allocateRevenue2: null,
        allocateRevenue3: null,
        specialRevenue: null,
        businessRevenue: null,
        engageRevenue: null,
        otherRevenue: null,
        targetRateCurrent: null,
        targetRateThree: null,
        createTimeStart: null,
        createTimeEnd: null,
        updateTimeStart: null,
        updateTimeEnd: null,
      },
      selectionList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        departmentKpiType: [{ required: false, validator: customValidator, min: 0, max: 20, label: '部门绩效类型', trigger: ['blur', 'change'] }],
        departmentName: [{ required: false, validator: customValidator, min: 0, max: 200, label: '部门名称', trigger: ['blur', 'change'] }],
        departmentSummarize: [{ required: false, validator: customValidator, min: 0, max: 0, label: '部门职能概述', trigger: ['blur', 'change'] }],
        totalRevenue: [{ required: false, validator: customValidator, min: 0, max: 13, label: '本年度部门预算收入（总额）', trigger: ['blur', 'change'] }],
        allocateRevenue: [{ required: false, validator: customValidator, min: 0, max: 13, label: '财政拨款收入', trigger: ['blur', 'change'] }],
        allocateRevenue1: [{ required: false, validator: customValidator, min: 0, max: 13, label: '一般公共预算', trigger: ['blur', 'change'] }],
        allocateRevenue2: [{ required: false, validator: customValidator, min: 0, max: 13, label: '政府性基金预算', trigger: ['blur', 'change'] }],
        allocateRevenue3: [{ required: false, validator: customValidator, min: 0, max: 13, label: '国有资本经营预算', trigger: ['blur', 'change'] }],
        specialRevenue: [{ required: false, validator: customValidator, min: 0, max: 13, label: '财政专户管理资金', trigger: ['blur', 'change'] }],
        businessRevenue: [{ required: false, validator: customValidator, min: 0, max: 13, label: '事业收入', trigger: ['blur', 'change'] }],
        engageRevenue: [{ required: false, validator: customValidator, min: 0, max: 13, label: '经营收入', trigger: ['blur', 'change'] }],
        otherRevenue: [{ required: false, validator: customValidator, min: 0, max: 13, label: '其他收入', trigger: ['blur', 'change'] }],
        targetCurrent: [{ required: false, validator: customValidator, min: 0, max: 0, label: '部门整体支出目标（本年）', trigger: ['blur', 'change'] }],
        targetRateCurrent: [{ required: false, validator: customValidator, min: 0, max: 13, label: '部门年度整体预算完成率（本年）', trigger: ['blur', 'change'] }],
        targetThree: [{ required: false, validator: customValidator, min: 0, max: 0, label: '部门整体支出目标（三年期）', trigger: ['blur', 'change'] }],
        targetRateThree: [{ required: false, validator: customValidator, min: 0, max: 13, label: '部门年度整体预算完成率（三年期）', trigger: ['blur', 'change'] }],
        others: [{ required: false, validator: customValidator, min: 0, max: 0, label: '其他需要说明的情况', trigger: ['blur', 'change'] }],
      },
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      doGet(this.svc, '/department-performance/page', this.listQuery).then(res => {
        this.listLoading = false
        this.list = res['records']
        this.total = parseInt(res['total'])
      }).catch(e => {
        console.error(e)
        this.listLoading = false
      })
    },
    handleResetQuery() {
      this.resetForm("listQuery")
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    handleSelectionChange(data) {
      this.selectionList = data
    },
    handleSortChange(data) {
      const { prop, order } = data
      this.listQuery.sortField = prop
      this.listQuery.sortType = order === 'ascending' ? 'asc' : 'desc'
      this.handleFilter()
    },
    handleView(row) {
      this.goTargetByName('departmentPerformancePreview', {id: row.id})
    },
    handleExport() {
      doGetDownload(this.svc, '/department-performance/export', this.listQuery)
    },
    handleDelete(row) {
      this.$confirm('您确定删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        doDelete(this.svc, '/department-performance/' + row.id, {}).then(() => {
          notifySuccess('操作成功')
          this.getList()
          this.dialogVisible = false
        })
      }).catch(e => {
        console.error(e)
      })
    },
  }
}
</script>
